// 获取整个大容器
var wrap = document.getElementById('wrap')
// 图片
var list = document.getElementById('list')
var items = list.getElementsByTagName('li')
// 按钮
var prev = document.getElementById('prev')
var next = document.getElementById('next')
// 指示点
var pointList = document.getElementById('pointList')
var pointLis = pointList.getElementsByTagName('li')
var index = 0 //当前展示图片
// 清除class
var clearClassName = function () {
  for (let i = 0; i < items.length; i++) {
    items[i].className = 'item'
  }
  for (let i = 0; i < pointLis.length; i++) {
    pointLis[i].className = ''
  }
}
var goIndex = function () {
  clearClassName()
  pointLis[index].className = 'on'
  items[index].className = 'item active'
}
// 下一张
function goNext() {
  index++
  if (index == items.length) {
    index = 0
  }
  goIndex()
}
next.addEventListener('click', function () {
  goNext()
})
// 上一张
function goPrev() {
  index--
  if (index < 0) {
    index = items.length - 1
  }
  goIndex()
}
prev.addEventListener('click', function () {
  goPrev()
})
// 原点点击事件
for (let i = 0; i < pointLis.length; i++) {
  pointLis[i].addEventListener('click', function () {
    var pointIndex = this.getAttribute('data-index')
    index = pointIndex
    goIndex()
  })
}

// 定时自动轮播
var timer
timer = setInterval(() => {
  goNext()
}, 1500)
// 鼠标移入清除定时器
wrap.onmouseenter = function () {
  clearInterval(timer)
}
// 鼠标移出，开启定时器
wrap.onmouseleave = function () {
  clearInterval(timer)
  timer = setInterval(() => {
    goNext()
  }, 1500)
}